<template>
  <div class="page">
    <Top></Top>
    <div class="banner">
      <div class="bannerContent">
        <div class="bannerTitle">
          新零售业务
        </div>
        <div class="bannerType">
          个性化研发服务，运营方案定制
        </div>
        <div class="bannerRectangleA"></div>
        <div class="bannerRectangleB"></div>
      </div>
    </div>
    <div class="contentOne">
      <div class="contentTitle">新零售软件研发服务</div>
      <div class="contentLists">
        <div class="contentList">
          <div class="contentListOne">
            <i class="iconfont icon-riyongbaihuo"></i>
            <p>日用百货</p>
          </div>
          <div class="contentListOne">
            <i class="iconfont icon-clothes"></i>
            <p>服装用品</p>
          </div>
          <div class="contentListOne">
            <i class="iconfont icon-jiaju"></i>
            <p>家居用品</p>
          </div>
        </div>
        <div class="contentList">
          <div class="contentListOne">
            <i class="iconfont icon-dianzidangan"></i>
            <p>电子设备</p>
          </div>
          <div class="contentListOne">
            <i class="iconfont icon-muyingwanju"></i>
            <p>母婴用品</p>
          </div>
          <div class="contentListOne">
            <i class="iconfont icon-tushu"></i>
            <p>图书文具</p>
          </div>
        </div>
        <div class="introduce">
          公司目前在新零售行业已与多家不同类型企业开展新零售业务合作，帮助其打造服务于新零售的软件产品。针对不同企业的需求，帮助其打造个性化的管理软件，搭建智慧门店，解决存有的数据信息和情景缺陷问题。
        </div>
      </div>
    </div>
    <div class="contentTwo">
      <div class="contentTitle">新零售软件研发服务</div>
      <div class="contentImg">
        <img src="../../assets/images/蒙版组 13.png" alt="" />
        <img src="../../assets/images/图像 31@2x.png" alt="" />
      </div>
      <div class="introduce">
        <p>针对新零售行业，依托新零售大数据平台，使得零售商获得大量用户的精准数据，驱动“人”、“货”、“场”三者关系的重构，助力零售形态的转型；</p>
        <p>针对新零售企业，利用大数据平台的优势，与企业开展开放式合作，围绕企业开展的零售业务提供全方位的数据化服务；</p>
      </div>
    </div>
    <div class="contentThree">
      <div class="contentTitle">新零售软件研发服务</div>
      <div class="contentLists">
        <div class="contentList">
          <i class="iconfont icon-keliuyuce"></i>
          <div>客流分析</div>
        </div>
        <div class="contentList">
          <i class="iconfont icon-kequntoushi"></i>
          <div>客群分析</div>
        </div>
        <div class="contentList">
          <i class="iconfont icon-jiaoyiyiliushui"></i>
          <div>交易洞察</div>
        </div>
        <div class="contentList">
          <i class="iconfont icon-yingxiao"></i>
          <div>营销效果</div>
        </div>
        <div class="contentList">
          <i class="iconfont icon-shouye"></i>
          <div>服务管理</div>
        </div>
        <div class="contentList">
          <i class="iconfont icon-tushu"></i>
          <div>数据仓库</div>
        </div>
      </div>
      <div class="introduce">
        给券助手是一款面向家居行业的新零售产品，产品与线下家居门店对接，统筹管理线下门店的库存、消费券、客户等信息，结合人脸识别技术，对门店内的商品信息、用户信息、用户浏览记录等信息进行精确的捕捉和记录。
      </div>
    </div>
    <div class="personnel">
      <div class="administrator">
        <i class="iconfont icon-laoban"></i>
        <div>门店老板：实时了解门店情况、定期了解门店运营情况</div>
      </div>
      <div class="administrator">
        <i class="iconfont icon-guanlizhe-xian"></i>
        <div>门店管理者：对门店内的记录进行查询和管理，精准的定位每一个消费者，为营销提供能力</div>
      </div>
      <div class="administrator">
        <i class="iconfont icon-pinpaixiaofeizhe"></i>
        <div>消费者：查看店内商品信息、优惠卷信息，更方便地获取理想商品</div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Top from '../../components/top.vue'
import Footer from '../../components/footer.vue'
export default {
  components: {
    Top,
    Footer
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 1280px;
  margin: 0 auto;
  background-color: #ffffff;
  .banner {
    display: flex;
    background-image: url('../../assets/images/图像 44.png');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 486px;
    .bannerContent {
      width: 336px;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      margin-top: 154px;
      padding-top: 14px;
      box-sizing: border-box;
      .bannerTitle {
        width: 400px;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        line-height: 37px;
        color: #ffffff;
        z-index: 20;
      }
      .bannerType {
        text-align: center;
        margin-top: 10px;
        z-index: 20;
        width: 380px;
        height: 26px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 26px;
        color: #ffffff;
        opacity: 1;
      }
      .bannerRectangleA {
        width: 34px;
        height: 37px;
        background: #ffffff;
        border: 1px solid #707070;
        opacity: 1;
        position: absolute;
        top: 17px;
        left: -48px;
      }
      .bannerRectangleB {
        position: absolute;
        top: 62px;
        left: -42px;
        width: 34px;
        height: 26px;
        background: #ffffff;
        border: 1px solid #707070;
        opacity: 1;
      }
    }
  }
  .contentOne {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .contentTitle {
      width: 180px;
      height: 26px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 26px;
      color: #080f1a;
      opacity: 1;
    }
    .contentLists {
      .contentList {
        margin-top: 21px;
        display: flex;
        padding-left: 156px;
        box-sizing: border-box;
        .contentListOne {
          margin-right: 149px;
          i {
            width: 60px;
            height: 60px;
            font-size: 60px;
            opacity: 1;
            padding-left: 2px;
          }
          p {
            width: 64px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 21px;
            color: #41454d;
            opacity: 1;
          }
        }
      }
      .introduce {
        margin-top: 34px;
        width: 804px;
        height: 55px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 24px;
        color: #080f1a;
        opacity: 1;
      }
    }
  }
  .contentTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    .contentTitle {
      width: 180px;
      height: 26px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 26px;
      color: #080f1a;
      opacity: 1;
      margin-bottom: 30px;
    }
    .contentImg {
      img {
        margin-right: 12px;
        width: 398px;
        height: 213px;
        background: #5b5b5b;
        opacity: 1;
        border-radius: 16px;
      }
    }
    .introduce {
      width: 804px;
      height: 86px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 24px;
      color: #080f1a;
      opacity: 1;
      margin-top: 50px;
      p {
        margin-bottom: 0em;
      }
    }
  }
  .contentThree {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 40px;
    .contentTitle {
      width: 180px;
      height: 26px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 26px;
      color: #080f1a;
      opacity: 1;
      margin-bottom: 53px;
    }
    .contentLists {
      display: flex;
      .contentList {
        margin-right: 59px;
        i {
          font-size: 48px;
          padding-left: 8px;
        }
        > div {
          width: 64px;
          height: 21px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 21px;
          color: #41454d;
          opacity: 1;
        }
      }
    }
    .introduce {
      margin-top: 50px;
      width: 804px;
      height: 53px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 24px;
      color: #080f1a;
      opacity: 1;
    }
  }
  .personnel {
    margin-left: 232px;
    margin-bottom: 50px;
    .administrator {
      margin-bottom: 10px;
      display: flex;
      i {
        width: 14px;
        height: 25px;
        opacity: 1;
        font-size: 25px;
        margin-right: 16px;
      }
      div {
        padding-top: 8px;
        height: 19px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 19px;
        color: #080f1a;
        opacity: 1;
      }
    }
  }
}
</style>
